Skip to content

Conversation

rothsandro
Copy link

@rothsandro rothsandro commented Oct 4, 2025

Closes #8339

Several components like Dialog and Select set data-pressed="true" on the trigger while the corresponding overlay is open, which is often not desired for styling. As outlined in the issue, a new property has been added to these components to prevent this behavior. The default value is true, so the behavior remains unchanged by default.

Naming: A few names for the property were suggested in the issue. I used isPressedWhenOpen on trigger components (DialogTrigger, MenuTrigger), and isTriggerPressedWhenOpen for other components to make it clear that the property affects the trigger.

I think it's easier to understand than consideredPressedWhenOpen. And persistPressStateWhenOpen doesn't feel right for me for components like Menu which open the overlay on press start and therefore never have data-pressed=true with the new behavior.

Storybook: I added a new control to the corresponding RAC stories which already used Story controls. Most of them don't and I didn't add a separate Story for it. If I should add them, let me know.

Spectrum: I also updated the S2 components, I hope that's okay.

  • The new property is omitted in the S2 props interfaces, I don't think it makes sense to set this from outside. This could be a breaking change on type-level in some edge cases, if someone expects the S2 DialogTriggerProps to fully extend the RAC DialogTriggerProps (which was the case before). Is that ok?
  • The workarounds to prevent stuck scale effects (isPressed={false}) are removed.
  • Some components have a custom implementation for pressed state (as the scale effect wouldn't be triggered otherwise). This is still necessary and not removed. I also added this workaround to the TabsPicker component.

✅ Pull Request Checklist:

  • Included link to corresponding React Spectrum GitHub Issue.
  • Added/updated unit tests and storybook for this change (for new code or code which already has tests).
  • Filled out test instructions.
  • Updated documentation (if it already exists for this component).
  • Looked at the Accessibility Practices for this feature - Aria Practices

📝 Test Instructions:

  1. Start Storybook yarn start
  2. Open the RAC Select Example
  3. Open the select
  4. Inspect the trigger button => data-pressed="true"
  5. Set the story control isTriggerPressedWhenOpen to false
  6. Inspect the trigger button => data-pressed is not set anymore

🧢 Your Project:

@rothsandro rothsandro changed the title feat: allow customazing behavior of pressed state feat: allow customizing behavior of pressed state Oct 4, 2025
@rothsandro rothsandro closed this Oct 4, 2025
@rothsandro rothsandro reopened this Oct 4, 2025
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Button remains in pressed state when opening a modal
1 participant